<template>
  <a-drawer :open="visible" title="拣货单详情" :width="1200" :body-style="{ paddingBottom: '80px', backgroundColor: '#F9F9F9' }" @close="onClose">
    <template #closeIcon>
      <close @on-close="onClose" />
    </template>
    <template #extra>
      <a-space :size="5">
        <span>{{ detailData.no }}</span>
        <span>{{ getDescByValue('PICKORDER_TYPE_ENUM', detailData.type) }}</span>
        <span>拣货人：{{ detailData.operator_name }}</span>
        <span>{{ detailData.create_time }}</span>
        <a-button type="link" @click="changeLogModal(true)">查看日志</a-button>
        <a-button @click="print(detailData)">
          <template #icon>
            <PrinterOutlined />
          </template>
          打印({{ detailData?.printLog?.print_count ?? 0 }})
        </a-button>
      </a-space>
    </template>
    <a-card size="small" title="基本信息">
      <a-descriptions size="small" :column="3">
        <a-descriptions-item label="单据编号">{{ detailData.no }}</a-descriptions-item>
        <a-descriptions-item label="拣货类型">{{ getDescByValue('PICKORDER_TYPE_ENUM', detailData.type) }}</a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ detailData.create_time }}</a-descriptions-item>
        <a-descriptions-item label="拣货完成时间">{{ detailData.picked_at }}</a-descriptions-item>
        <a-descriptions-item label="拣货人">{{ detailData.operator_name }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card class="smart-margin-top10" size="small" :tab-list="tabList" :active-tab-key="activeKey" @tabChange="(key) => (activeKey = key)">
      <template #customTab="{ tab }">
        <span class="ant-card-head-title" :style="compactModeClass">
          {{ tab }}
        </span>
      </template>
      <template v-if="activeKey === 'orders'">
        <PickingOrderTable :detail-data="detailData" :orderData="detailData.details" @refresh="getDetail" />
      </template>
      <template v-if="activeKey === 'goods'">
        <PickingGoodsTable :detail-data="detailData" :goodsData="detailData.goods" />
      </template>
    </a-card>
    <template #footer>
      <a-button @click="onClose">取消</a-button>
    </template>

    <LogModal v-model:open="showLogModal" @close="changeLogModal(false)" :tableData="detailData.relatedLog" />
    <pickingPrintModal ref="printRef" />
  </a-drawer>
</template>

<script setup lang="ts">
import pickingPrintModal from './picking-print-modal.vue'
import PickingOrderTable from './picking-order-table.vue'
import PickingGoodsTable from './picking-goods-table.vue'
import { message } from 'ant-design-vue'
import { pickOrderApi } from '@/api/business/storage/picking-api'
import { useEnums } from '@/hooks/plugins/useEnums'
const compactModeClass = inject('compactModeClass')
const { getDescByValue } = useEnums()

defineExpose({
  showDrawer
})
const emit = defineEmits(['refresh'])

// --------------------- Drawer 显示与隐藏 ---------------------
// 是否展示
const visible = ref(false)
// 详情
const detailData = ref({})
// 详情tab
const activeKey = ref('orders')
const tabList = [
  {
    key: 'orders',
    tab: '订单明细'
  },
  {
    key: 'goods',
    tab: '商品明细'
  }
]
const recordId = ref('')
async function showDrawer(record) {
  recordId.value = record.id
  await getDetail()
}
async function getDetail() {
  try {
    const res = await pickOrderApi.detail({ id: recordId.value })
    detailData.value = res.data
    visible.value = true
  } catch (error) {
    message.error(error.msg)
  }
}

const onClose = () => {
  visible.value = false
}

const showLogModal = ref(false)
function changeLogModal(status: boolean) {
  showLogModal.value = status
}

// 打印
const printRef = ref()
function print(goodsData) {
  printRef.value.showDrawer(goodsData)
}
</script>
